/*
 * App Global CSS
 * ----------------------------------------------------------------------------
 * Put style rules here that you want to apply globally. These styles are for
 * the entire app and not just one component. Additionally, this file can be
 * used as an entry point to import other CSS/Sass files to be included in the
 * output CSS.
 * For more information on global stylesheets, visit the documentation:
 * https://ionicframework.com/docs/layout/global-stylesheets
 */

/* Core CSS required for Ionic components to work properly */
@import "../node_modules/@ionic/angular/css/core.css";

/* Basic CSS for apps built with Ionic */
@import "../node_modules/@ionic/angular/css/structure.css";
@import "../node_modules/@ionic/angular/css/normalize.css";
@import "../node_modules/@ionic/angular/css/padding.css";

@import "../node_modules/tailwindcss/base.css";

@import "../node_modules/tailwindcss/components.css";
@import "../node_modules/tailwindcss/utilities.css";

@import "./assets/styles/app.pcss";

ion-grid {
	--ion-grid-padding: 0;
}

ion-toolbar * {
	box-sizing: border-box;
}

ion-button {
	font-weight: 500;
}

ion-label {
	--color: var(--ion-color-dark-tint) !important;
}

.label-floating {
	transform: scale(0.75) !important;
}

.md ion-label {
	&.label-stacked {
		transform: scale(0.75) !important;
	}
}

ion-item {
	--highlight-height: 0;

	&.item-input {
		--padding-start: 0;
		--padding-end: 0;
		--inner-padding-end: 0;
		--border-color: transparent;
	}
}

ion-input,
ion-textarea {
	border: 1px solid var(--ion-color-light-shade);
	border-radius: 0.4rem;

	&.ion-invalid.ion-dirty {
		border-color: var(--ion-color-danger);
	}

	input,
	textarea {
		--padding-start: 1rem;
		--padding-end: 1rem;
	}
}

.dark-theme {
	ion-input {
		border-color: var(--ion-color-light-tint);
	}
}

.text-selectable {
	user-select: auto !important;
}

.note-toolbar {
	padding: 1em;
	background-color: rgba(var(--ion-color-warning-rgb), 0.5);
}
